<template>
	<div class="back_contain_n">
		<div class="top_mouth">
			<div class="mouth_list">
				<i class="el-icon-caret-left icon_el" @click="chooseLastYear"></i>
				<li class="list_nav year">{{ defaultChooseTime.meterYear }}</li>
				<i class="el-icon-caret-right icon_el" @click="nextLastYear"></i>
				<li class="list_nav mouth" v-for="(item,index) in mouthList" :key="index"
					:class="{'active': item.active,'click': defaultChooseTime.meterMoth == item.value}"
					@click="changeMouth(item)"
				>
					{{item.name}}
				</li>
			</div>
		</div>
		<!-- table -->
		<sys-table
			:tableData="tableData"
			:tableLoading="tableLoading"
			:tableHeader="tableHeader"
			:scopeWidth="120"
			:isOperate="false"
		>
			<!--<template slot-scope="scope" slot="operate">-->
				<!--<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>-->
			<!--</template>-->
		</sys-table>

		<!-- 新建弹框 -->
		<div class="zll-dialog">
			<popout title="生产能耗 · 查看" :visible.sync="addDialog" v-if="addDialog" class="">
				<Add ref="add" slot="content" :editData="editData" :type="type"></Add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
				</template>
			</popout>
		</div>
		<div class="chart_" ref="echartLine"></div>
	</div>
</template>

<script>
	import Add from './add';
	import echartOption from './echart'
	import {formatDate} from "@/plugins/formatDate";

	export default {
		data() {
			return {
				mouthList: [
					{name: '1月', value: '01', active: false},
					{name: '2月', value: '02', active: false},
					{name: '3月', value: '03', active: false},
					{name: '4月', value: '04', active: false},
					{name: '5月', value: '05', active: false},
					{name: '6月', value: '06', active: false},
					{name: '7月', value: '07', active: false},
					{name: '8月', value: '08', active: false},
					{name: '9月', value: '09', active: false},
					{name: '10月', value: '10', active: false},
					{name: '11月', value: '11', active: false},
					{name: '12月', value: '12', active: false},
				],
				defaultChooseTime: {
					meterYear: '',
					meterMoth: '',
				},
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				tableData: [],
				tableHeader: [],
				addDialog: false,
			}
		},
		methods: {
			chooseLastYear() {
				let meterYear = this.defaultChooseTime.meterYear;
				this.defaultChooseTime.meterYear = (parseFloat(meterYear) -1)+'';
				this.defaultChooseTime.meterMoth = '01';
				this.getMeterPowerList();
			},
			nextLastYear() {
				let meterYear = this.defaultChooseTime.meterYear;
				this.defaultChooseTime.meterYear = (parseFloat(meterYear) +1)+'';
				this.defaultChooseTime.meterMoth = '01';
				this.getMeterPowerList();
			},
			changeMouth(val) {
				this.defaultChooseTime.meterMoth = val.value;
				this.getMeterPowerList();
			},

			getMeterPowerList() {
				let self = this;
				self.tableData = [];
				self.tableHeader = [];
				self.tableLoading = true;
				self.$http({
					url: "/jinl/meterPower/getMeterPowerList",
					method: "post",
					params:self.defaultChooseTime
				}).then(resp => {
					if (resp.success) {
						self.tableData = resp.result.list||[];
						self.tableHeader = resp.result.header||[];
					}
					self.tableLoading = false;
				});
			},

			getYearMeterPowers() {
				let self = this;
				let year = (new Date().getFullYear())+'';
				self.$http({
					url: "/jinl/meterPower/getYearMeterPowers",
					method: "post",
					params:{year:year}
				}).then(resp => {
					if (resp.success) {
						console.log(resp.result);
						let echart = self.$echarts.init(self.$refs.echartLine);
						let option = echartOption.option;
						let datas = [];
						let years = [];
						let series = [];
						let flag = false;
						for(let key in resp.result){
							datas.push(key);
							let values = [];
							for(let _data of resp.result[key]){
								if(!flag){
									years.push(_data.moth+'月份')
								}
								values.push(parseFloat(_data.paAdd))
							}
							flag = true;
							let r = Math.floor(Math.random() * 256);
							let g = Math.floor(Math.random() * 256);
							let b = Math.floor(Math.random() * 256);
							let color =  'rgb(' + r + ',' + g + ',' + b + ')';
							let ser = {
								name: key,
								type: 'line',
								smooth: true, //是否平滑
								showAllSymbol: true,
								symbol: 'circle',
								symbolSize: 12,
								lineStyle: {
									normal: {
										color: color,
									},
								},
								itemStyle: {
									color: color,
									borderWidth: 3,
									borderColor: '#f3f3f3',
								},
								data: values,
							};
							series.push(ser);

						}
						option.legend.data = datas;
						option.xAxis[0].data = years;
						option.series = series;

						echart.setOption(option);
						window.onresize = function () {
							echart.resize()
						}
					}

				});
			},

			edit(val, type) {

			},

			getEchartData() {
				let self = this;
				let echart = self.$echarts.init(self.$refs.echartLine);
				let option = echartOption.option;
				echart.setOption(option);
				window.onresize = function () {
					echart.resize()
				}
			}
		},
		mounted() {
			let self = this;
			let time = formatDate(new Date(), 'yyyy-MM-dd');
			self.defaultChooseTime.meterYear = time.split('-')[0];
			self.defaultChooseTime.meterMoth = time.split('-')[1];
			self.mouthList.filter((val) => {
				if (val.value == self.defaultChooseTime.meterMoth) {
					val.active = true
				}
			});
			self.getMeterPowerList();//显示table
			self.getYearMeterPowers();
		},
		components: {
			Add,
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.chart_ {
		width: 100%;
		height: 300px;
	}

	.top_mouth {
		position: relative;

		.mouth_list {
			width: 100%;
			display: flex;
			margin-bottom: 15px;

			.icon_el {
				color: #FF9800;
				font-size: 26px;
				line-height: 30px;
				cursor: pointer;

				&:hover {
					opacity: .7;
				}
			}

			.list_nav {
				text-align: center;
				line-height: 30px;
				width: 5%;

				&.year {
					color: #fff;
					background-color: #34bfc6;
					font-size: 14px;
					padding: 0 5px;
					width: 100px;
				}

				&.mouth {
					color: #ccc;
					border-bottom: 1px solid #fff;
					/*cursor: no-drop;*/
					padding: 0 10px;
					transition: all .5s;
					cursor: pointer;

					&.active {
						color: #34bfc6;
						cursor: pointer;
					}

					&.click {
						border-bottom: 1px solid #34bfc6;
						font-weight: 600;
						font-size: 14px;
						position: relative;
					}

					&:hover {
						font-weight: 600;
					}
				}
			}
		}
	}
</style>